<template>
  <div>
    <a-card style="width: 100% ;height:100%">
      <div slot="title">
        <a-icon type="arrow-left" @click="()=>{$router.back()}" />&nbsp;&nbsp;&nbsp;
        <span>商品详情</span>
      </div>
      <a-list size="large" bordered >
        <a-list-item class="item"><div class="left">商品名称:</div><span style="font-size: 20px;">{{product.name}}</span></a-list-item>
        <a-list-item class="item"><div class="left">商品描述:</div><span style="font-size: 20px;">{{product.desc}}</span></a-list-item>
        <a-list-item class="item"><div class="left">商品价格:</div><span style="font-size: 20px;">{{product.price}}</span></a-list-item>
        
        <a-list-item class="item"><div class="left">商品类别:</div>
        <span style="font-size: 20px;">{{pCategoryName}}</span>
        <span style="font-size: 20px;" v-if="categoryName!=''">
            <a-icon type="arrow-right" />
            {{categoryName}}
        </span>
        </a-list-item>
        <a-list-item class="item"><div class="left">商品图片:</div>
            <img v-if="product.imgs[0]" style="height:200px;width:200px" :src="'http://localhost:5000/upload/'+product.imgs" alt="">
            <span v-else style="font-size: 20px;">暂无图片</span>
            
        </a-list-item>
        <a-list-item class="item"><div class="left">商品状态:</div><span  v-if="product.status" style="font-size: 20px;">{{product.status==1?'在售':'已下架'}}</span></a-list-item>
        <a-list-item class="item"><div class="left">商品详情:</div><span v-html="product.detail" style="font-size: 20px;"></span></a-list-item>
      </a-list>
    </a-card>
  </div>
</template>
<script>
import { reqCategory } from "../../../api/index";
import { message } from "ant-design-vue";
export default {
  async created() {
        
    if(this.$route.params.product!==undefined){
        
        this.product = this.$route.params.product.value
        localStorage.setItem("product",JSON.stringify(this.$route.params.product.value))
    }else{
       
        this.product = JSON.parse(localStorage.getItem("product") || "{}")
    }
   if(this.product.categoryId!==undefined){
        var categoryId = this.product.categoryId
    var pCategoryId = this.product.pCategoryId
    var result2 = await reqCategory(this.product.pCategoryId)
    var result = await reqCategory(this.product.categoryId)
    this.categoryName = result.data.name
    this.pCategoryName = result2.data.name
   }

  },
  data(){
      return{
          product:{},
          categoryId:'',
          pCategoryName:"",
          categoryName:""
          
      }
  },
  methods: {

  }
};
</script>
<style lang="stylus" scoped>

  .left {
    display :inline-block;
    margin-right: 30px;
    font-size: 20px;
    font-weight: 700;
  }

</style>
